<template>
    <div class="">
        <head-nav :isBack="isBack"></head-nav>
        <!-- 占位 -->
        <div class="zanwei-top"></div>
        <!-- <div class="rapdetail" v-if="itemObj">
          <div class="ph_faddish">
            <img :src="itemObj.TP[0]" />
          </div>
          <div class="name_faddish">
            <h3 class="tit">{{itemObj.SPMC}}</h3>
            <ul>
              <router-link class="rap_rout" :to="{path:'/rappay'}" tag="div">
                <li class="btn_faddish" @click="exchangeFn(itemObj.XJ, itemObj.ID)">立即抢购</li>
              </router-link>
              <li class="price">
                <div>原价 {{itemObj.JE }}</div>
                <p>现价 {{itemObj.XJ}}</p>
              </li>
            </ul>
          </div>
          <div class="detail_faddish contentA">
            <div v-html="itemObj.MS"></div>
          </div>
        </div> -->

        <!-- new weigang start -->
        <div class="hbbox">
            <div class="topimg">
                <!-- <img :src="itemObj.TP[0]" > -->
                <mt-swipe :auto="4000">
                    <mt-swipe-item v-for="(item,index) in itemObj.XQT" :key="index"><img :src="item"></mt-swipe-item>
                </mt-swipe>
            </div>
            <div class="title">
                {{itemObj.SPMC}}
            </div>
            <div class="detailsm">
                <div class="jg" v-if="itemObj.XJ!=0 && itemObj.JF==0" :style="textColor">
                    ￥{{itemObj.XJ}}<span v-if="(itemObj.XJ!=itemObj.JE)"> 原价 {{itemObj.JE }}</span>
                </div>
                <div class="jg" v-else-if="itemObj.XJ==0 && itemObj.JF!=0" :style="textColor">
                    {{itemObj.JF}}积分
                </div>
                <div class="jg" v-else-if="itemObj.XJ!=0 && itemObj.JF!=0" :style="textColor">
                    ￥{{itemObj.XJ}}<span v-if="(itemObj.XJ!=itemObj.JE)"> 原价 {{itemObj.JE }}</span>
                </div>
                <div class="jf">
                    剩余<span>{{itemObj.KC}}</span>
                </div>
            </div>
            <div class="zsjf1" v-if="itemObj.JF" >
                {{itemObj.JF}}积分
            </div>
            <div class="line20"></div>
            
            <div class="zsjf" v-if="itemObj.ZSJF">
                赠送<span>{{itemObj.ZSJF}}</span>积分
            </div>
            <!-- <div class="spms">
              {{itemObj}}
            </div> -->
           <!-- <div class="spjssm" v-html="itemObj.MS">

            </div>-->

            <mt-navbar v-model="selected">
                <mt-tab-item id="1">商品详情</mt-tab-item>
                <mt-tab-item id="2">兑换须知</mt-tab-item>
            </mt-navbar>
            <div class="xqxz">
                <!-- tab-container -->
                <mt-tab-container v-model="selected">
                    <mt-tab-container-item id="1">
                        <div class="spdetail contentA" v-html="itemObj.MS"></div>
                    </mt-tab-container-item>
                    <mt-tab-container-item id="2">
                        <!-- {{itemObj.DHGZ}} -->
                        <div class="contentA" v-html="itemObj.DHGZ"></div>
                    </mt-tab-container-item>
                </mt-tab-container>
            </div>
        </div>
        <div class="footbuy" @click="exchangeFn(itemObj.XJ, itemObj.ID)" :style="backgroundColor">
            立即抢购
        </div>
        <!-- 完善信息弹出层 -->
        <div class="zccg" v-show="cgts">
        <div class="zccgbox">
            <div class="tstitle">请完善信息</div>
            <div class="close" @click="closefn">
                <i class="iconfont icon-close"></i>
            </div>
            <div class="tsms">
                因涉及到个人财务安全，请填写正确的个人信息！
            </div>
            <div class="tscontent">
                <ul>
                    <li>
                        <mt-field placeholder="请输入您的姓名" v-model="userlist.name" type="text"> </mt-field>
                    </li>
                    <li>
                        <mt-field placeholder="请输入您的身份证号码" v-model="userlist.idcard" type="text"> </mt-field>
                    </li>
                </ul>
         
            </div>
            <div class="zcbtn">
                <mt-button type="primary" size="large" @click.native="wsxxfn(itemObj.XJ, itemObj.ID)">保存</mt-button>
            </div>
        </div>
        <!-- 背景 -->
        <div class="zccgbg"></div>
        </div>
        <!--底部占位-->
        <div class="zanwei-bottom"></div>
    </div>
</template>

<script>
    import api from '@/api/api'
    import {MessageBox, Swipe, SwipeItem, Toast} from 'mint-ui';

    export default {
        data() {
            return {
                isBack:false,
                itemObj: {},
                cgts: false,
                selected: '1',
                userlist:{
                    name:'',
                    idcard:'',
                    address:''

                }
                // 	img: 'http://www.rtaksoft.com:3200/res/form/2c91a36a63d4cc100163dd9bc49e01ee/297eb6155f35043d015f3505adfd0004/4415820180609112851732.jpg',
                // 	title: '乐宾9周年 店庆预售卡',
                // 	img2: 'http://www.rtaksoft.com:3200/res/form/2c91a36a63d4cc100163dd9bc49e01ee/297eb6155f35043d015f3505adfd0004/1424420180608122452695.png',
                // 	yjje: 800,
                // 	xjje: 600
                // },
                // htmlMsg: "<p style='margin-bottom: 5px; text-align: center;'>此商品物超所值，赶快行动吧!</p><p style='margin-bottom: 5px; text-align: center;'><img src='http://www.rtaksoft.com:3200/res/form/2c91a36a63d4cc100163dd9bc49e01ee/297eb6155f35043d015f3505adfd0004/9864120180608121647134.png'/><br/></p><p style='margin-bottom: 5px; text-align: center;'><strong>此商品你值得拥有!</strong></p>",
            }
        },
        methods: {
            exchangeFn(xj, lpid) {
                let page = this;

                let userinfo = JSON.parse(sessionStorage.getItem('userinfo'));
                
                if (userinfo != null && userinfo.vipcode) {
                    // 查询是否填写了身份证和地址
                    api.getUserInfo(this, function(res) {
                        let data = res.data;
                        console.log(res,"查询是否填写了身份证和姓名");
                        if(data.code==0){
                            if(data.data.XF_VIPID&&data.data.XF_SURNAME){
                                // 身份证和姓名都有有数据

                                // if (true) {
                                MessageBox.confirm('确定下单吗?', '温馨提示').then(action => {
                                    if (action === 'confirm') {
                                        if (xj > 0) {
                                            page.$router.push({
                                                path: '/rappay/',
                                                query: {
                                                    lpid: lpid
                                                }
                                            })
                                        } else {
                                            let page = this
                                            let userinfo = JSON.parse(sessionStorage.getItem('userinfo'));
                                            api.scoreCreateOrder(page, userinfo.vipcode, lpid, cb)

                                            function cb(res) {
                                                console.log('生订单')
                                                console.log(res)
                                                if (res.code == 0) {
                                                    let insertObj = {
                                                        pdid: res.data
                                                        // rowobj: this.rowobj
                                                    }
                                                    page.$router.push({
                                                        path: '/scorecreate',
                                                        query: {
                                                            create: insertObj
                                                        }
                                                    })
                                                } else {
                                                    Toast({
                                                        message: res.msg,
                                                        duration: 3000
                                                    });
                                                }

                                            }
                                        }
                                    }
                                });

                            }else{
                                // page.Toastfn("需要填写", 2000);
                                page.cgts = true;

                            }

                        }else if(data.code === 9999){
                            //orcal数据库异常 关闭当前窗口
                            MessageBox.alert(data.msg, '温馨提示').then(action => {
                                wx.closeWindow()
                            })
                        }else{
                            page.Toastfn(data.msg, 2000);
                        }
                    })

                    
                } else {
                    Toast({
                        message: '您还不是会员，快去注册吧！',
                        duration: 2000
                    });
                    setTimeout(function () {
//                      page.$router.push('/register')
												page.$router.push({path: '/register', query: {type: 'willsave'}});
                    }, 2000)
                }
            },
            /**
             * @param ID 礼品ID
             */
            getGiftDetailFn(id) {
                let page = this
                let userinfo = JSON.parse(sessionStorage.getItem('userinfo'));
                api.scoreToGiftDetail(page,userinfo.vipcode, id, cb)

                function cb(res) {
                    if (res.code == 0) {
                        let data = JSON.parse(res.data)
                        console.log(data)
                        // page.$store.state.title = data.SPMC
                        let TP = data.TP.map(x => {
                            return page.host.filehost + x
                        })
                        data.TP = TP
                        let XQT = data.XQT.map(x => {
                            return page.host.filehost + x
                        })
                        data.XQT = XQT

                        page.itemObj = data

                        page.$nextTick(function(){
                          uParse('.contentA', {
                            rootPath: '/static/libs/ueditor/'
                          })
                        });

                    } else {
                        Toast({
                            message: res.msg,
                            duration: 3000
                        });
                    }

                }
            },
            // 提示函数
            Toastfn(message, duration, position) {
                Toast({
                    message: message,
                    duration: duration,
                    position: position
                });
            },
            // 关闭弹出层
            closefn(){
                let page = this;
                page.cgts = false;
            },
            // 保存完善信息
            wsxxfn(xj, lpid){
                let page = this;
                if (this.userlist.name == "") {
                    page.Toastfn("请输入您的姓名",2000);
                } else if (this.userlist.idcard == "") {
                    page.Toastfn("请输入您的身份证号码",2000);
                } else if (this.userlist.idcard.length != 18) {
                    page.Toastfn("请输入正确的身份证号码",2000);
                } else{
                    let fromdata = {
                        name:this.userlist.name,
                        idcard:this.userlist.idcard,
                        address:this.userlist.address||'',
                    }
                    // 更新获取用户信息
                    api.updateHyInfo(this, fromdata, function(res) {
                        let data = res.data;
                        console.log(res);
                        if(data.code==0){
                            console.log('更新成功');
                            // 关闭完善信息
                            page.cgts = false;
                            // if (true) {
                            MessageBox.confirm('确定下单吗?', '温馨提示').then(action => {
                                if (action === 'confirm') {
                                    if (xj > 0) {
                                        page.$router.push({
                                            path: '/rappay/',
                                            query: {
                                                lpid: lpid
                                            }
                                        })
                                    } else {
                                        let page = this
                                        let userinfo = JSON.parse(sessionStorage.getItem('userinfo'));
                                        api.scoreCreateOrder(page, userinfo.vipcode, lpid, cb)

                                        function cb(res) {
                                            console.log('生订单')
                                            console.log(res)
                                            if (res.code == 0) {
                                                let insertObj = {
                                                    pdid: res.data
                                                    // rowobj: this.rowobj
                                                }
                                                page.$router.push({
                                                    path: '/scorecreate',
                                                    query: {
                                                        create: insertObj
                                                    }
                                                })
                                            } else {
                                                Toast({
                                                    message: res.msg,
                                                    duration: 3000
                                                });
                                            }

                                        }
                                    }
                                }
                            });
                        }else{
                            page.Toastfn(data.msg, 2000);
                        }
                    })

                }

            }
        },
        mounted() {
            let id = this.$route.params.id
            this.pdid = id
            this.getGiftDetailFn(id)
            
        }
    }

</script>

<style lang="less">
    li{
        list-style: none;
    }
    .insetbox2 {
        // padding: 0 0.2rem;
        // padding-top: 0.15rem;
        background-color: #e9e9e9;
    }

    .rapdetail {
        background-color: #fff;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 0.4rem 0.3rem;
        .ph_faddish {
            img {
                width: 6.20rem;
                height: 6.20rem;
            }
        }
        .name_faddish {
            margin: 0.38rem 0;
            width: 6.2rem;
            border-top: 0.04rem solid #e2e2e2;
            border-bottom: 0.04rem solid #e2e2e2;
            padding: 0.05rem 0;
            .tit {
                font-size: 0.3rem;
                color: #e20010;
                line-height: 0.5rem;
            }
            ul {
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 0.1rem 0;
                .btn_faddish {
                    width: 2.6rem;
                    height: 0.88rem;
                    border-radius: 0.12rem;
                    line-height: 0.88rem;
                    text-align: center;
                    color: #fff;
                    font-size: 0.4rem;
                    background-color: #F05DC4;
                }
                .price {
                    margin-left: 0.4rem;
                    color: #aeaeae;
                    div {
                        font-size: 0.24rem;
                        line-height: 0.4rem;
                        text-align: left;
                    }
                    p {
                        font-size: 0.38rem;
                        line-height: 0.54rem;
                        color: #747273;
                    }
                }
            }
        }
        .detail_faddish {
        }
    }

    // newweigang
    .hbbox {
        .topimg {
            height: 4rem;
            img {
                width: 100%;
                height:100%;
            }
        }
        .title {
            font-weight: bold;
            font-size: .36rem;
            padding: .2rem .2rem .1rem .2rem;
        }
        .detailsm {
            display: flex;
            justify-content: space-between;
            align-items: center;
            // border-bottom: 8px solid #f4f4f4;
            .jg {
                color: #F05DC4;
                font-size: .42rem;
                font-weight: bold;
                padding: .2rem .2rem .2rem .2rem;
                span {
                    font-size: .28rem;
                    text-decoration: line-through;
                    color: #999999;
                    margin-left: .5rem;
                }
            }
            .jf {
                padding-right: .2rem;
                font-size: .28rem;
                color: #666666;
                span {
                    color: #F05DC4;
                }
            }

        }
        .zsjf {
            border-bottom: 1px solid #f4f4f4;
            padding: .2rem .2rem .2rem .2rem;
            color: #F05DC4;
            font-size: .30rem;
            span {
                color: #F05DC4;
                font-size: .30rem;
            }
        }
        .zsjf1 {
            border-bottom: 1px solid #f4f4f4;
            padding: 0rem .2rem .2rem .2rem;
            color: #999999;
            font-size: .30rem;
            
        }
        .spjssm {
            border-bottom: 8px solid #f4f4f4;
            padding: .1rem .2rem .3rem .2rem;
            color: #666666;
        }
        .xqxz {
            padding: 10px;
        }
    }

    .footbuy {
        position: fixed;
        bottom: 0;
        width: 100%;
        text-align: center;
        background-color: #F05DC4;
        color: #fff;
        height: 48px;
        line-height: 48px;
        font-size: 18px;
    }

    // 提示
    .zccg {
        width: 100%;
        top: 0;
        .zccgbox {
            // padding-top: 0.7rem;
            position: absolute;
            border-radius: 5px;
            z-index: 10;
            width: 80%;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            // height: 7.5rem;
            height: 280px;
            background-color: #ffffff;
            // color: #ffffff;
            text-align: center;
            color: #333333;
            .close{
                position: absolute;
                right: 8px;
                top: 8px;
                .iconfont{
                    font-size: 20px;
                    color: #666666;
                }
            }
            .tstitle{
                text-align: center;
                font-size: 16px;
                font-weight: bold;
                padding: 12px;
            }
            .tsms{
                font-size: 14px;
                color: #666666;
                padding: 0 20px 10px 20px;
            }
            .tscontent{
                ul{
                li{
                    border:1px solid #e6e6e6;
                    margin: 10px;
                    border-radius: 5px;
                    overflow: hidden;
                }
            }
            }
            .zcbtn{
                margin: 0 10px;
            }
        }
        .zccgbg {
            background-color: #000000;
            position: fixed;
            opacity: 0.5;
            width: 100%;
            height: 100vh;
            top: 0;
            z-index: 9;
        }
    }

</style>
